<template>
    <div class="box1" :style="{backgroundImage:`url(${srllerlis.avatar})`}" >
      <header>
         <div class="tou">
            <section>
                <img :src="srllerlis.avatar" >
            <div class="right">
                <h2>{{srllerlis.name}}</h2>
                <p>{{srllerlis.description}}</p>
                <p>在线支付满28减5</p>
            </div>
            </section>
            <span>5个 ></span>
            <div class="bottom">
                <span>公告</span>
                <p> {{srllerlis.bulletin}}</p>
            </div>
         </div>
      </header>
    </div>
</template>

<script>
import { mapActions,mapState,mapMutations} from 'vuex';
    export default {
        data(){
            return{

            }
        },
       created(){

     
      this.Seller();

        },


        methods:{
      ...mapActions(["Seller"]),
      ...mapMutations(["fun1"])
      
        },
        computed:{
      ...mapState(["srllerlis"]),
      
        }
    }
</script>

<style  scoped>
*{
    padding: 0;
    margin: 0;
}
.box1{
    height: 134px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(251, 248, 248);
    
}
header{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgb(7, 17, 27,0.5);
    backdrop-filter: blur(10px);
    
}
.tou{
    width: 100%;
    height: 100%;
    overflow: hidden;
    
}
.tou span{
    display:block;
    position: absolute;
    right: 12px;
    bottom: 45px;
    height: 24px;
    font-size: 10px;
    color: #fff;
    font-weight: 200;
    line-height: 24px;
    background-color: rgb(0, 0, 0,0.2);
    border-radius: 15px;
    padding-left: 8px;
    padding-right: 8px;
}
section{
  box-sizing: border-box;
  padding-top: 24px;
  margin-left: 24px;
  display: flex;
  overflow: hidden;
}
section img{
    width: 64px;
    height: 64px;
    background-color: blueviolet;
   

    
}
.right{
    box-sizing: border-box;
    padding-left: 16px;
    overflow: hidden;
}
.right h2{
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    line-height: 18px;
    margin-top: 2px;
}
.right p{
    font-size: 12px;
    color: #fff;
    font-weight: 200;
    line-height: 12px;
    margin-top: 8px;
}
.right p+p{
    font-size: 10px;
    color: #fff;
    font-weight: 200;
    line-height: 12px;
    margin-top: 10px;
}
.bottom{
    height: 28px;
    width: 100%;
    position: absolute;
    bottom: 0;
    background-color: rgb(7, 17, 27,0.2);
    overflow: hidden;
    line-height: 28px;
    box-sizing: border-box;
    padding: 0 12px;
}
.bottom p{
    width: 90%;
    font-size: 10px;
    color: #fff;
    font-weight: 200;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;


}
.bottom span{
    font-size: 12px;
    padding: 3px;
    background-color: #fff;
    
}

</style>